<template>
  <div style="width: 345px; height: 640px; margin: 0px; background-color: #efefef; position: fixed;">
    <div style="text-align: center; font-size: 30px; margin-top: 50px;"></div>
    <i class="el-icon-arrow-left" @click="$router.go(-1)"></i>
    <div style="text-align: center; font-size: 22px; margin-top: 50px;">登录/注册</div>
    <div style="text-align: center; margin-top: 50px;">
      <div>
        <input placeholder="输入手机号(新手机号自动注册)" type="text" v-model="phone" style="padding-left: 15px; width: 210px; height: 35px; border: 1px solid gray; border-radius: 8px;">
      </div>
      <div style=" margin-top: 10px;">
        <input placeholder="验证码" type="text" v-model="code" style="padding-left: 15px; width: 210px; height: 35px; border: 1px solid gray; border-radius: 8px;">
      </div>
      
    </div>
    <div style="margin-top: 20px; text-align: center;">
      <button :enable="btnState" 
       :disabled="disbaled" 
       @click="SendCode" 
       style="background-color: cadetblue; border-radius: 5px; width: 80px; height: 40px; border: none; color: white; margin-right: 10px;">
       验证码{{ countDown }}S</button>
      <button :enable="btnState"  @click="submitForm" style="background-color: cadetblue; border-radius: 5px; width: 80px; height: 40px; border: none; color: white; margin-right: 10px;">登录</button>
      
    </div>

    <div style="margin-top: 40px;">
      <el-divider>其他登录方式</el-divider>
    </div>
    <div>
      <el-row style="margin-top: 10px;">
            <el-col :offset="4">
              <p >
                <span ><el-button type="primary" icon="el-icon-mobile-phone" @click="$router.go(-1)" circle></el-button></span>
                <span style="margin-left:50px"><el-button type="success" icon="el-icon-user-solid" @click="$router.push('sortingLogin')" circle></el-button></span>
                <span style="margin-left:50px"><el-button type="danger" icon="el-icon-user" @click="$router.push('distributionLogin')" circle></el-button></span>
              </p>
              
              
              
          <p style="margin-left:1px">
            <span><el-link  type="primary">一键登录</el-link></span>
            <span style="margin-left:25px"><el-link  type="success">分拣员登录</el-link></span>
            <span style="margin-left:25px"><el-link  type="danger">配送员登录</el-link></span>
          </p>
          
          
          

            </el-col>
          </el-row>
    </div>
    <div style="text-align: center; margin-top: 100px;">
      <el-checkbox v-model="checked"><span>我已阅读并同意《服务条款》、《隐私政策》</span></el-checkbox>
      <!-- <input type="checkbox" v-model="doChange"> <span style="color: #409EFF">我已阅读并同意《服务条款》、《隐私政策》</span> -->
    </div>
  </div>
</template>

<script>


export default {
  data(){
  return {
    btnState: false,
    phone:'',
    code:'',
    checked:true,
    disbaled:false, //按钮是否可用
    countDown:'60' //倒计时时间
    
    
}
  },
  methods: {
       
        SendCode(){
          // debugger;
          this.$axios.get('api/app/user/sendCode?phone='+this.phone)
            .then(res=>{
              console.log(res.data)
              if(res.data.code == 200){
                this.code = res.data.data;
                this.$message("验证码发送成功！")
                this.disbaled=true; //禁用按钮
                let timer = setInterval(() =>{
                  if(this.countDown >0){
                    this.countDown--;
                  }else{
                    clearInterval(timer);
                    this.disbaled=false; //启用按钮
                    this.countDown =60; //重置倒计时时间
                  }
                },1000);
              }else{
                this.$message("验证码发送失败！")
              }
            })
          
        },
      submitForm() {
        console.log(this.btnState)
        if(this.checked){
         this.$axios.get('api/app/user/UserRegister?phone='+this.phone+'&code='+this.code)
        .then(res =>{
          sessionStorage.setItem("phone",this.phone)
          console.log(res.data)
          if(res.data.code==200){
            this.$router.push('firstPage')
          }else{
            this.$message("登录失败！")
          }
        })
        }else{
          this.$message("请勾选同意协议")
        }
        
      },
      
      // doChange(){
        
      //     this.btnState = true;
      //     console.log(this.btnState)
      // }
    }
}
</script>

<style scoped> 

</style>